<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="include/header.jsp" %>
<head>
    <script src="${pageContext.request.contextPath}/res/js/fore/fore_register.js"></script>
    <link href="${pageContext.request.contextPath}/res/css/fore/fore_register.css" rel="stylesheet">
    <title>天猫tmall.com - 网上注册</title>
    <script>
        $(function () {
            $("span.address_province").text($("#select_order_address_province").find("option:selected").text());
            $("span.address_city").text($("#select_order_address_city").find("option:selected").text());
            $("span.address_district").text($("#select_order_address_district").find("option:selected").text());
        })
    </script>
    <style rel="stylesheet">
        #nav {
            width: auto;
            height: 32px;
            font-family: "Microsoft YaHei UI", Tahoma, serif;
            font-size: 12px;
            position: relative !important;
            background: #f2f2f2;
            z-index: 999;
            border-bottom: 1px solid #e5e5e5;
        }
    </style>
</head>
<body>
<nav>
    <div class="header">
        <div id="mallLogo">
            <a href="${pageContext.request.contextPath}"><img
                    src="${pageContext.request.contextPath}/res/images/fore/WebsiteImage/tmallLogoA.png"><span
                    class="span_tmallRegister">用户注册</span></a>
        </div>
    </div>
</nav>
<div class="content">
    <div class="steps">
        <div class="steps_main">
            <span class="steps_tsl">填写账号信息</span>
        </div>
    </div>
    <div class="form-list">
        <div class="form-item">
            <label class="form-label form-label-b tsls">设置会员名</label>
        </div>
        <div class="form-item">
            <label class="form-label tsl">用户名：</label>
            <input name="user_name" id="user_name" class="form-text err-input" placeholder="请输入用户名" maxlength="20">
            <span class="form_span"></span>
        </div>
        <div class="form-item">
            <label class="form-label form-label-b tsls">设置登录密码</label>
            <label class="form-label tsl">登录时验证，保护账号信息</label>
        </div>
        <div class="form-item">
            <label class="form-label tsl">登录密码：</label>
            <input name="user_password" type="password" id="user_password" class="form-text err-input"
                   placeholder="请设置登录密码" maxlength="20">
            <span class="form_span"></span>
        </div>
        <div class="form-item">
            <label class="form-label tsl">确认密码：</label>
            <input name="user_password_one" type="password" id="user_password_one" class="form-text err-input"
                   placeholder="请再次输入你的密码" maxlength="20">
            <span class="form_span"></span>
        </div>
        <div class="form-item">
            <label class="form-label form-label-b tsls">填写基本信息</label>
        </div>
        <div class="form-item">
            <label class="form-label tsl">昵称：</label>
            <input name="user_nickname" id="user_nickname" class="form-text err-input" placeholder="请输入昵称"
                   maxlength="20">
            <span class="form_span"></span>
        </div>
        <div class="form-item">
            <label class="form-label tsl">性别：</label>
            <input name="user_gender" type="radio" id="form_radion" value="0" checked="checked">男
            <input name="user_gender" type="radio" id="form_radions" value="1">女
        </div>
        <div class="form-item">
            <label class="form-label tsl">出生日期：</label>
            <input type="date" name="user_birthday" id="user_birthday" class="form-text err-input"/>
            <span class="form_span"></span>
        </div>
        <div class="form-item">
            <label class="form-label tsl">居住地址：</label>
            <p align="center" style="position: absolute; top: 573px; right: 760px">
                省：<select name="" id="sel1">
                <option value="">请选择</option>
            </select>
                市：<select name="" id="sel2"></select>
                区：<select name="" id="sel3"></select>
            </p>

            <script src="${pageContext.request.contextPath}/res/js/fore/address.js"></script>

            <script>
                var sel1 = document.getElementById("sel1")
                var sel2 = document.getElementById("sel2")
                var sel3 = document.getElementById("sel3")
                var address = document.getElementById("address")
                var cityArr = []; //市级数组
                var areaArr = []; //区级数组

                //省级遍历
                citys.forEach(v => {
                    var option = new Option(v.name);
                    sel1.options.add(option);//省
                })

                var sel1Index = 0;
                sel1.onchange = function () {
                    // console.log(this.selectedIndex);//请选择和省级下标 (这里的请选择下标为0，省级下标从1开始)

                    sel1Index = this.selectedIndex - 1;// 设定数组省级下标从0开始
                    //  console.log(sel1Index);
                    sel2.options.length = 0;//点击省选项改变清空之前市级选项
                    sel3.options.length = 0;
                    if (sel1Index != -1) {
                        cityArr = citys[sel1Index].city
                        //console.log(cityArr);
                        //市级遍历
                        cityArr.forEach(v => {
                            var option = new Option(v.name);
                            sel2.options.add(option);//市
                        })

                        areaArr = cityArr[0].area;
                        sel3.options.length = 0;
                        //区级遍历
                        areaArr.forEach(v => {
                            var option = new Option(v);
                            sel3.options.add(option);//区
                        })

                        address.innerText = citys[sel1Index].name + cityArr[0].name + areaArr[0];
                    }
                    else{
                        address.innerText = "";
                    }
                }

                var sel2Index = 0;
                sel2.onchange = function(){
                    sel2Index = this.selectedIndex;
                    console.log(sel2Index);
                    areaArr = cityArr[sel2Index].area;

                    sel3.options.length = 0;
                    //区级遍历
                    areaArr.forEach(v => {
                        var option = new Option(v);
                        sel3.options.add(option);//区
                    })
                    address.innerText = citys[sel1Index].name + cityArr[sel2Index].name + areaArr[0];
                }
                var sel3Index = 0;
                sel3.onchange = function(){
                    sel3Index = this.selectedIndex;
                    address.innerText = citys[sel1Index].name + cityArr[sel2Index].name + areaArr[sel3Index];

                }
            </script>
<%--            <select class="selectpicker" id="select_user_address_province" data-size="8" data-live-search="true">--%>
<%--                <c:forEach items="${requestScope.addressList}" var="address" varStatus="i">--%>
<%--                    <option value="${address.address_areaId}"--%>
<%--                            <c:if test="${requestScope.addressId==address.address_areaId}">selected</c:if>>${address.address_name}</option>--%>
<%--                </c:forEach>--%>
<%--            </select>--%>
<%--            <select class="selectpicker" id="select_user_address_city" data-size="8" data-live-search="true">--%>
<%--                <c:forEach items="${requestScope.cityList}" var="address" varStatus="i">--%>
<%--                    <option value="${address.address_areaId}"--%>
<%--                            <c:if test="${requestScope.cityAddressId==address.address_areaId}">selected</c:if>>${address.address_name}</option>--%>
<%--                </c:forEach>--%>
<%--            </select>--%>
<%--            <select name="user_address" class="selectpicker" id="select_user_address_district" data-size="8"--%>
<%--                    data-live-search="true">--%>
<%--                <c:forEach items="${requestScope.districtList}" var="address" varStatus="i">--%>
<%--                    <option value="${address.address_areaId}"--%>
<%--                            <c:if test="${requestScope.districtAddressId==address.address_areaId}">selected</c:if>>${address.address_name}</option>--%>
<%--                </c:forEach>--%>
<%--            </select>--%>
        </div>
        <div class="form-item">
            <input type="button" id="register_sub" class="btns btn-large tsl" value="注 册"/>
        </div>
    </div>
</div>
<%@include file="include/footer.jsp" %>
<link href="${pageContext.request.contextPath}/res/css/fore/fore_foot_special.css" rel="stylesheet"/>
<div class="msg">
    <span>注册成功，跳转到登陆页面</span>
</div>
</body>

